
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <title>错题分析报告</title>
            <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
            <style>
                body {
                    font-family: "Microsoft YaHei", sans-serif;
                    margin: 0;
                    padding: 20px;
                    background-color: #f0f2f5;
                }
                .container {
                    max-width: 1200px;
                    margin: 0 auto;
                }
                .header {
                    background: linear-gradient(135deg, #1a73e8, #289cf5);
                    color: white;
                    padding: 30px;
                    border-radius: 15px;
                    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
                    margin-bottom: 30px;
                    text-align: center;
                }
                .header h1 {
                    margin: 0;
                    font-size: 2.5em;
                    font-weight: normal;
                }
                .student-info {
                    font-size: 1.2em;
                    margin-top: 15px;
                }
                .score {
                    font-size: 3.5em;
                    font-weight: bold;
                    margin: 20px 0;
                    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
                }
                .charts-container {
                    display: flex;
                    gap: 30px;
                    margin-bottom: 30px;
                }
                .chart-box {
                    flex: 1;
                    background: white;
                    padding: 20px;
                    border-radius: 15px;
                    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
                }
                .chart {
                    height: 400px;
                }
                .wrong-questions {
                    background: white;
                    padding: 30px;
                    border-radius: 15px;
                    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
                }
                .wrong-questions h2 {
                    color: #1a73e8;
                    margin-top: 0;
                    padding-bottom: 15px;
                    border-bottom: 2px solid #eee;
                    font-size: 1.8em;
                }
                table {
                    width: 100%;
                    border-collapse: collapse;
                    margin-top: 20px;
                    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
                }
                th {
                    background: #f8f9fa;
                    color: #1a73e8;
                    padding: 15px;
                    text-align: left;
                    border-bottom: 2px solid #eee;
                    font-size: 1.1em;
                }
                td {
                    padding: 15px;
                    border-bottom: 1px solid #eee;
                    font-size: 1.1em;
                }
                .wrong-answer {
                    color: #dc3545;
                    font-weight: bold;
                    background-color: rgba(220, 53, 69, 0.1);
                    padding: 5px 10px;
                    border-radius: 4px;
                }
                .correct-answer {
                    color: #28a745;
                    font-weight: bold;
                    background-color: rgba(40, 167, 69, 0.1);
                    padding: 5px 10px;
                    border-radius: 4px;
                }
                tr:hover {
                    background-color: #f8f9fa;
                    transition: background-color 0.3s;
                }
            </style>
        </head>
        <body>
            <div class="container">
                <div class="header">
                    <h1>错题分析报告</h1>
                    <div class="student-info">
                        学号：1 | 试卷：1
                    </div>
                    <div class="score">0 分</div>
                </div>
                
                <div class="charts-container">
                    <div class="chart-box">
                        <div id="scoreChart" class="chart"></div>
                    </div>
                    <div class="chart-box">
                        <div id="wrongChart" class="chart"></div>
                    </div>
                </div>
                
                <div class="wrong-questions">
                    <h2>错题详情</h2>
                    <table>
                        <tr>
                            <th>题目</th>
                            <th>你的答案</th>
                            <th>正确答案</th>
                        </tr>
                        
                <tr>
                    <td>第01题:  18 *   0 = </td>
                    <td class="wrong-answer">1</td>
                    <td class="correct-answer">0</td>
                </tr>
            
                <tr>
                    <td>第02题:  37 +  65 = </td>
                    <td class="wrong-answer">1</td>
                    <td class="correct-answer">102</td>
                </tr>
            
                    </table>
                </div>
            </div>
            
            <script>
                var scoreChart = echarts.init(document.getElementById('scoreChart'));
                var wrongChart = echarts.init(document.getElementById('wrongChart'));
                
                var scoreOption = {
                    title: { 
                        text: '得分情况',
                        textStyle: {
                            fontSize: 18,
                            fontWeight: 'normal'
                        }
                    },
                    series: [{
                        type: 'gauge',
                        progress: { show: true },
                        axisLine: {
                            lineStyle: {
                                width: 20,
                                color: [
                                    [0.6, '#dc3545'],
                                    [0.8, '#ffc107'],
                                    [1, '#28a745']
                                ]
                            }
                        },
                        pointer: { show: false },
                        axisTick: { show: false },
                        splitLine: { show: false },
                        axisLabel: { show: false },
                        detail: {
                            valueAnimation: true,
                            formatter: '{value}分',
                            fontSize: 30,
                            fontWeight: 'bold',
                            offsetCenter: [0, '0%']
                        },
                        data: [{ value: 0 }]
                    }]
                };
                
                var wrongOption = {
                    title: { 
                        text: '答题情况分析',
                        textStyle: {
                            fontSize: 18,
                            fontWeight: 'normal'
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c}题 ({d}%)'
                    },
                    legend: {
                        orient: 'horizontal',
                        bottom: 'bottom',
                        data: ['正确', '错误']
                    },
                    series: [{
                        name: '答题情况',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: true,
                            formatter: '{b}: {c}题'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 20,
                                fontWeight: 'bold'
                            }
                        },
                        data: [
                            { 
                                value: 0, 
                                name: '正确',
                                itemStyle: { color: '#28a745' }
                            },
                            { 
                                value: 2, 
                                name: '错误',
                                itemStyle: { color: '#dc3545' }
                            }
                        ]
                    }]
                };
                
                scoreChart.setOption(scoreOption);
                wrongChart.setOption(wrongOption);
                
                window.addEventListener('resize', function() {
                    scoreChart.resize();
                    wrongChart.resize();
                });
            </script>
        </body>
        </html>
        